<template>
  <div class="boxx">
    <div class="table">
        <el-button type="primary" size="medium" @click="open">新增分类</el-button>
        <el-button type="info" size="medium" @click="sorttype">按分类优先度排序</el-button>
        <br>
        <br>
        <el-table :data="tableData" border>
        <el-table-column prop="id" label="分类编号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="分类名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="sort" label="分类优先度" width="100" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="分类图书数量" width="130" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="分类创建时间" width="200" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="分类更新时间" width="200" align="center">
        </el-table-column>
        <el-table-column prop="updateUser" label="操作账号" width="140" align="center">
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="updateType(scope.row.id)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteType(scope.row.id)">删除</el-button>
            </template>       
        </el-table-column>
      </el-table>

    </div>
    <div class="card">
        <transition name="el-zoom-in-center">
        <el-card class="box-card" v-show="visble">
            <el-input v-model="name" placeholder="请输入分类名"></el-input>
            <el-input v-model="sort" placeholder="请输入优先度(1-10)"></el-input>
            <el-button type="primary" size="medium" @click="addtype">添加</el-button>
            <el-button size="medium" @click="cancle">取消</el-button>
        </el-card>
        </transition>
    </div>

    <div class="card1">
        <transition name="el-zoom-in-center">
        <el-card class="box-card" v-show="visble1">
            <el-input v-model="wname" placeholder="分类名"></el-input>
            <el-input v-model="wsort" placeholder="优先度"></el-input>
            <el-button type="primary" size="medium" @click="update">修改</el-button>
            <el-button size="medium" @click="cancle1">取消</el-button>
        </el-card>
        </transition>
    </div>
    

  </div>
</template>

<script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
import axios from "axios"
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
    data () {
        return {
            visble1:false,
            visble:false,
            tableData:[],
            name:'',
            sort:'',
            wid:'',
            wname:"",
            wsort:'',
            isSort:true,
        }
    },
    methods: {
        open(){
            if(this.visble1 == true){
                this.cancle1()
            }
            if(this.visble == true){
                this.visble=false
            }else{
                this.visble=true
            }  
        },
        sorttype(){
            if(this.isSort == true){
                axios.get(this.url + "/book/typelist",{
                    params:{
                        "isSort":1
                    }
                }).then((res) => {
                    if(res.data.code == 1){
                        this.tableData = res.data.data
                    }
                }).catch(() => {
                    this.$message.error("页面加载失败")
                });
                this.isSort = false
            }else{
                axios.get(this.url + "/book/typelist").then((res) => {
                    if(res.data.code == 1){
                        this.tableData = res.data.data
                    }
                }).catch(() => {
                    this.$message.error("页面加载失败")
                });
                this.isSort = true
            }
        },
        /* 添加分类 */
        addtype(){
            if(this.name == '' || this.sort == ''){
                this.$message.warning("字段不能为空")
                return
            }
            var reg = /^([0-9]|10)$/;
            if(!reg.test(this.sort)){
                this.$message.warning("请正确输入优先度")
                return
            }
            axios.put(this.url + "/book/addtype",{
                "id":localStorage.getItem("id"),
                "username":localStorage.getItem("username"),
                "name":this.name,
                "sort":this.sort,
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("操作成功")
                    this.cancle()
                    this.gettype()
                }else{
                    this.$message.error(this.data.msg)
                }
            }).catch(() => {
                this.$message.error("未知原因添加分类失败")
            });
        },
        cancle(){
            this.visble=false,
            this.name = "",
            this.sort = ""
        },
        cancle1(){
            this.visble1 = false
        },
        /* 将书的id赋值给wid，方便后续更新操作 */
        updateType(val){
            this.cancle()
            axios.get(this.url + "/book/gettype",{  
            params:{
                    "id":val
                }
            }).then((res) => {
                if(res.data.code == 1){
                    this.wname = res.data.data.name;
                    this.wsort = res.data.data.sort;
                    this.wid = res.data.data.id;
                    this.visble1 = true
                }    
            }).catch(()=>{
                this.$message.error("操作失败")
            })
        },
        update(){
            axios.put(this.url + "/book/updatetype",{
                "id":localStorage.getItem("id"),
                "username":localStorage.getItem("username"),
                "name":this.wname,
                "sort":this.wsort,
                "bookId":this.wid
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("修改成功")
                    this.cancle1()
                    this.gettype()
                }
            }).catch(() => {
                this.$message.error("操作失败")
            });
        },
        deleteType(val){
            axios.delete(this.url + "/book/type/"+val).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("删除成功")
                    this.gettype()
                }else{
                    this.$message.error(res.data.msg)
                }              
            }).catch(() => {
                this.$message.error("操作失败")
            });
        },
        gettype(){
            axios.get(this.url + "/book/typelist").then((res) => {
            if(res.data.code == 1){
                this.tableData = res.data.data
            }
        }).catch(() => {
            this.$message.error("页面加载失败")
        });
        }
    },
    mounted () {
        axios.get(this.url + "/book/typelist").then((res) => {
            if(res.data.code == 1){
                this.tableData = res.data.data
            }
        }).catch(() => {
            this.$message.error("页面加载失败")
        });
    }
}
</script>

<style scoped>
    .boxx{
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
        position: relative;
    }
    .el-card{
        width: 400px;
        height: 240px;
        background-color: rgb(powderblue,powderblue,255,0.9);
        border-radius: 15px;
    }
    .card{
        position: absolute;
        top: 18%;
        left: 30%;
        line-height: 70px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 999;
    }
    .card1{
        position: absolute;
        top: 18%;
        left: 30%;
        line-height: 70px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 988;
    }
</style>